import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'
// 导入组件
import PostList from '@/views/PostList.vue'
import PostEdit from '@/views/PostEdit.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    // 一级路由做了校验即可，因为二级路由本质上其实就是一级路由的 子组件而已
    meta: {
      isAuth: true,
    },
    // 1️⃣ 把原本的 PostList 和 PostEdit 写到 children 属性中，就会变成二级路由
    // 2️⃣ 二级路由的组件会显示在一级路由组件的坑位里面 <router-view />
    // 🧨 二级路由配置属性的时候，需要注意 path 就不需要带斜杠了，否则容易出现不可预知 BUG。
    children: [
      {
        path: 'PostList', // 大写懒得改也行，因为最终浏览器会自动转换成全小写
        name: 'PostList',
        component: PostList,
      },
      {
        path: 'PostEdit',
        name: 'PostEdit',
        component: PostEdit,
      },
    ],
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
]

const router = new VueRouter({
  routes,
})

// 获取 Token 的方法导入
import { getToken } from '@/utils/myToken'

// 使用 router.beforeEach 注册一个全局前置守卫
router.beforeEach((to, from, next) => {
  // console.log('去往哪个城市(页面) -- to', to)
  // console.log('来自哪个城市(页面) - from', from)
  if (to.meta.isAuth === true) {
    if (!getToken()) {
      return router.replace('/login')
    }
  }
  // 没有特殊情况的页面，统一放行。🧨注意：代码的最后一定要记得放行，忘记放行就看不到任何页面了
  next()
})

// 导出路由实例，提供给 src/main.js 入口文件使用
export default router
